<template>
    <div class="community_item_space">
        <div>
            <div class="community_item_info">
                <div style="display: flex;">
                    <el-avatar shape="square" :size="50" :fit="fit" :src="url" />
                    <div class="community_item_info_name">
                        <div class="community_item_info_name_title">拾云网络</div>
                        <div class="community_item_info_name_subtitle">官方账号</div>
                    </div>
                    <div class="community_item_info_time">五分钟前</div>
                </div>

                <div class="community_item_info_btn">
                    <button class="community_item_info_btn_subscribe">订阅</button>
                    <button class="community_item_info_btn_like">点赞</button>
                    <button class="community_item_info_btn_collect">收藏</button>
                </div>
            </div>
            <div>
                <div class="community_item_title">
                    这是从网络中收集的一些壁纸，希望大家喜欢
                    <span class="community_item_text">正文，这是收集的一些壁纸,正文，这是收集的一些壁纸正文，这是收集的一些壁纸正文，这是收集的一些壁纸</span>
                </div>
                <div class="community_item_img_list">
                    <img class="community_item_img_item"
                        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6512ad38e52a9c1b9cf429ee69602f16.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440"
                        alt="">
                    <img class="community_item_img_item"
                        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6512ad38e52a9c1b9cf429ee69602f16.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440"
                        alt="">
                    <img class="community_item_img_item"
                        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6512ad38e52a9c1b9cf429ee69602f16.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440"
                        alt="">
                    <img class="community_item_img_item"
                        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6512ad38e52a9c1b9cf429ee69602f16.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440"
                        alt="">
                    <img class="community_item_img_item"
                        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6512ad38e52a9c1b9cf429ee69602f16.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_1440"
                        alt="">
                        

                </div>



            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
        }
    },
}
</script>

<style scoped>
.community_item_space {
    background: #f2f2f2;
    border-radius: var(--raduis);
    width: 705px;
    margin: 10px;
    padding: 10px;

    .community_item_info {

        display: flex;
        justify-content: space-between;

        .community_item_info_name {
            margin: 0 10px;

            .community_item_info_name_title {
                font-size: 17px;
                font-weight: bold;
            }

            .community_item_info_name_subtitle {
                font-size: 13px;
            }
        }

        .community_item_info_time {
            font-size: 12px;
            color: #d6d6d6;
        }
    }

    .community_item_info_btn {
        display: flex;

        button {
            width: 80px;
            height: 30px;
            background-color: #e5e5e5;
            border-radius: var(--raduis);
            border: none;
            margin: 0 5px;
        }

        .community_item_info_btn_subscribe {
            background-color: #ffc3c3;
            color: #fff;
        }

        .community_item_info_btn_like {
            background-color: #ff7879;
            color: #fff;
        }

        .community_item_info_btn_collect {
            background-color: #c3c3ff;
            color: #fff;
        }
    }

    .community_item_title {
        margin: 10px;
        font-size: 17px;
        font-weight: 600;

        .community_item_text {
            font-size: 13px;
        }
    }

    .community_item_img_list {
        display: flex;
        flex-wrap: wrap;

        .community_item_img_item {
            width: 213px;
            margin: 10px;
            border-radius: var(--raduis)
        }
    }
}
</style>